<template>
    <div class="three_page" id="threePage" @click="AllOver">
    </div>
</template>
<script setup>
    import * as THREE from 'three'
    import {OrbitControls} from "three/addons/controls/OrbitControls.js";
    import {nextTick, onMounted} from "vue";
    import {GUI} from "three/addons/libs/lil-gui.module.min";
                let container
                let IMAGE_KEY=new URL('../assets/R.jpg',import.meta.url).href
                let width
    let height
    let depth=1000
    let scene
    let mesh
    let controls
    let camera
    //相机在z轴的位置
    let zAixisNumber
                //相机

                //渲染器
    let renderer=null

        onMounted(()=> {
            container =document.getElementById('threePage')
            width=container.clientWidth
            height=container.clientHeight
            initScene()
            initSceneBG()
            initCamera()
            initRenderer()
            initOrbitControls()
            createLight()
            animate()

            // renderer.render(scene,camera)
            console.log(scene,'环境')


        })
  function  createLight() {
      // 创建环境光
      let ambientLight = new THREE.AmbientLight('#fff', 0.5)
      // ambientLight.decay = 0.0///光线衰弱，默认为2.0，不衰弱为0.0
      ambientLight.position.set(10,10,10)
      let directionalLight = new THREE.DirectionalLight('#fff', 10);//创建一个光源
      directionalLight.position.set(80, 100, 50);
      scene.add(directionalLight);
      directionalLight.castShadow = true;//设置用于计算投影的光源对象
      // directionalLight.shadow.camera.near = 2.1;
      // directionalLight.shadow.camera.far = 300;
      // directionalLight.shadow.camera.left = -50;
      // directionalLight.shadow.camera.right = 150;
      // directionalLight.shadow.camera.top = 100;
      // directionalLight.shadow.camera.bottom = -150;
     scene.add(ambientLight)
  }
            //初始化场景
           function initScene(){
                scene = new THREE.Scene()
                scene.fog = new THREE.Fog(0x000000,2,1000)
            }
            //添加背景
           function initSceneBG(){
                new THREE.TextureLoader().load(IMAGE_KEY,(texture)=>{
                    //创建立方体
                    let geometry = new THREE.BoxGeometry(10,10,10)
                    //爱心的坐标
                    const shape = new THREE.Shape();
                    const x = -2.5;
                    const y = -5;
                    shape.moveTo(x + 2.5, y + 2.5);
                    shape.bezierCurveTo(x + 2.5, y + 2.5, x + 2, y, x, y);
                    shape.bezierCurveTo(x - 3, y, x - 3, y + 3.5, x - 3, y + 3.5);
                    shape.bezierCurveTo(x - 3, y + 5.5, x - 1.5, y + 7.7, x + 2.5, y + 9.5);
                    shape.bezierCurveTo(x + 6, y + 7.7, x + 8, y + 4.5, x + 8, y + 3.5);
                    shape.bezierCurveTo(x + 8, y + 3.5, x + 8, y, x + 5, y);
                    shape.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);

                    const extrudeSettings = {
                        steps: 2,

                        depth: 2,

                        bevelEnabled: true,
                        bevelThickness: 1,

                        bevelSize: 1,

                        bevelSegments: 2,

                    };
                    const geometry2 = new THREE.BufferGeometry()
                    //绘制顶点坐标
                    // const vertices = new Float32Array([-1,-1,0,1,-1,0,1,1,0,1,1,0,-1,1,0,-1,-1,0])
                    // geometry2.setAttribute('position',new THREE.BufferAttribute(vertices,3))
                    //创建顶点索引
                    const vertices = new Float32Array([-1,-1,0,1,-1,0,1,1,0,-1,1,0])
                    geometry2.setAttribute('position',new THREE.BufferAttribute(vertices,3))
                    //创建索引
                    const indices = new Uint16Array([0,1,2,2,3,0])
                    //创建索引属性
                    geometry2.setIndex(new THREE.BufferAttribute(indices,1))
                    const material2 =new THREE.MeshBasicMaterial({color:'#29568a',side:THREE.DoubleSide,wireframe:true})
                    //设置2个顶点组，形成2个材料
                    geometry2.addGroup(0,3,0)
                    geometry2.addGroup(3,3,1)
                    const geometry1 =new THREE.ExtrudeGeometry(shape, extrudeSettings);
                    let material1 = new THREE.MeshLambertMaterial({
                        color:'#21c2c2'
                    })
                    let mesh2 = new THREE.Mesh(geometry, material1);
                    mesh2.receiveShadow = true
                    mesh2.castShadow = mesh2.receiveShadow = true;
                    //材质
                    let material = new THREE.MeshBasicMaterial({
                        map:texture,side:THREE.BackSide
                    })

                    //网格
                    mesh = new THREE.Mesh(geometry, material);
                    let mesh1 = new THREE.Mesh(geometry1, material1);

                    //位置设置
                    // mesh.position.set(10,0,0)
                    //放大缩小
                    mesh.scale.set(2,2,2)
                    //绕着X轴旋转
                    mesh1.rotation.y =Math.PI + 30
                    mesh1.rotation.z =Math.PI

                    //辅助线条
                    const axesHelper = new THREE.AxesHelper(50)
                    scene.add(axesHelper)
                    //控制立方体的位置
                    let floder = gui.addFolder('立方体位置')
                    // floder.add(mesh.position, 'x').min(-10).max(10).step(1).name('立方体x轴位置');
                    //立马执行，监听的感觉  onChange 注意大写
                    floder.add(mesh.position, 'x').min(-10).max(10).step(1).name('立方体x轴位置').onChange((val)=>{
                        console.log(val,'坐标s')
                    });
                    //完成后执行，防抖节流的感觉  onFinishChange
                    floder.add(mesh.position,'y').min(-10).max(10).step(1).name('立方体x轴位置').onFinishChange((val)=>{
                        console.log(val,'y')
                    })
                    floder.add(mesh.position,'z').min(-10).max(10).step(1).name('立方体x轴位置')
                    let colorParams = {
                        mesh1Color:'#21c2c2'
                    }
                    gui.addColor(colorParams,'mesh1Color').name("颜色").onChange((val)=>{
                        mesh1.material.color.set(val)
                    })
                    //添加场景
                    // scene.add(mesh)
                    // scene.add(mesh1)
                    scene.add(mesh2)

                })
               // let geometry = new THREE.BoxGeometry(10,10,10)
               // let material = new THREE.MeshBasicMaterial({color:0x00ff00
               //         })
               // mesh = new THREE.Mesh(geometry, material);
               // //     //添加场景
               //     scene.add(mesh)
            }
            //初始化相机
           function initCamera(){
                //视野夹角
                let fov  =15
                //计算相机距离物体的距离
                let distance = width/2/Math.tan(Math.PI/12)
                zAixisNumber = Math.floor(distance - 1000/2)
                camera = new THREE.PerspectiveCamera(fov,width/height,1,3000)
                //设置相机的位置
                camera.position.set(100,200,5)
                //看向原点
                camera.lookAt(0,0,0)
            }
            //渲染器
           function initRenderer(){
                renderer= new THREE.WebGLRenderer({antialias:true})
                //定义渲染器的尺寸
                renderer.setSize(width,height)
               renderer.shadowMap.enabled =true//阴影
               renderer.setClearColor(0x444444, 1); //设置背景颜色
               renderer.shadowMap.type = THREE.PCFShadowMap
                container.appendChild(renderer.domElement)
               // let btn =document.createElement('button')
               // btn.innerText='点击全屏'
               // btn.style.position='absolute'
               // btn.style.top='60px'
               // btn.style.left ='10px'
               // btn.style.color='red'
               // btn.style.zIndex='999'
               // btn.onclick=function(){
               //     //全屏
               //     renderer.domElement.requestFullscreen()
               // }
               // container.appendChild(btn)

           }


            //添加轨道控制器
           function initOrbitControls(){
                controls = new OrbitControls(camera,renderer.domElement)
               //设置阻力的惯性
               // controls.enableDamping = true
               // //设置阻力系数
               // controls.dampingFactor = 0.05
               // controls.autoRotate = true
               //  controls.enabled = true
               //  controls.update()
            }
            //动画刷新
           const animate=()=>{
                requestAnimationFrame(animate);
               renderer.render(scene,camera)
            }


            window.addEventListener('resize',()=>{
                //重置渲染器宽高比
                renderer.setSize(width,height)
                //重置相机宽高比
                camera.aspect = width/height
                //更新相机投影矩阵
                camera.updateProjectionMatrix()
            })
    let eventObj={
        Fullscreen:function (){
            //全屏
            renderer.domElement.requestFullscreen()
        }
    }
    //创建GUI
    const gui = new GUI()
    //添加按钮
    gui.add(eventObj,'Fullscreen').name('全屏')

</script>


<style>
    .three_page {
        width: 100%;
        height: 100vh;
    }
    /*canvas{*/
    /*    display: block;*/
    /*    position: fixed;*/
    /*    left: 0;*/
    /*    top: 0;*/
    /*    width: 100vh;*/
    /*    height: 100vh;*/
    /*}*/
</style>
